<template>
    <div>
        <el-form :model="queryForm" :inline="true" class="demo-form-inline">
            <el-form-item label="所属系统">
                <sys-select v-model="queryForm.sysCode" @change="sysChange()"/>
            </el-form-item>
            <el-form-item>
                <el-input v-model="queryForm.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="easyPage.records" ref="singleTable" @current-change="handleCurrentChange"
                  highlight-current-row
                  style="width: 100%" border>
            <el-table-column type="index" class-name="index-table" width="50"/>
            <el-table-column prop="roleName" label="角色名称"/>
            <el-table-column prop="roleCode" label="角色编码"/>
        </el-table>
        <common-page v-model="easyPage" @change="getData" @current-change="getData"/>
    </div>
</template>

<script>
  import CommonPage from '../../../components/common/CommonPage.vue'
  import SysSelect from '../../../components/sys/SysSelect'

  export default {
    name: 'role-table',
    components: {
      CommonPage,
      SysSelect
    },
    data () {
      return {
        easyPage: {
          current: 1,
          size: 10
        },
        queryForm: {
            sysCode :'sec'
        },
        selectRoleId: '',
        treeData: [],
        treeCheckedKeys: [],
        treeProps: {
          children: 'children',
          label: 'menuName'
        }
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.easyPage.current,
          size: self.easyPage.size
        })
        self.$axios
          .post('roleAction/findEasyPage', self.queryForm)
          .then((res) => {
            self.easyPage = res.data
          })
      },
      sysChange () {
        let self = this
        Object.assign(self.queryForm, {
            current: self.easyPage.current,
            size: self.easyPage.size
        })
        self.$axios
            .post('roleAction/findEasyPage', self.queryForm)
            .then((res) => {
                self.$emit('change','')
                self.easyPage = res.data
            })
      },
      handleCurrentChange (currentRow) {
        let self = this
        let data = {
            roleId:currentRow.roleId,
            sysCode:self.queryForm.sysCode
        }
        // self.$emit('change',currentRow.roleId)
        self.$emit('change',data)
      }

    }
  }
</script>